<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-09-01 14:22:34
 * @LastEditors: 关德参 2257609862@qq.com
 * @LastEditTime: 2024-09-15 22:06:32
 * @FilePath: /task-admin/src/views/assets-list/components/ProjectReturnManagement/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="container">
    <div class="pb-16px">
      <span class="text-16px font-500 lh-22px pt-16px pb-16px block"
        ><i class="text-[#ef4e4e]">*</i>{{ $t("common.selectProject") }}</span
      >
      <el-select
        v-model="projectId"
        :placeholder="$t('common.selectProject')"
        @change="handleProjectChange"
      >
        <el-option
          v-for="item in projectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <!-- 出售商品 -->
      <el-tab-pane name="first">
        <template #label>
          <span class="custom-tabs-label">
            <svg-icon
              class="w-14px h-14px mr-5px text-[#969799]"
              :icon-class="
                activeName !== 'first'
                  ? 'assetssale-no-select'
                  : 'assetssale-select'
              "
            />
            {{ $t("common.sellingGoods") }}
          </span>
        </template>
        <!-- 列表 -->
        <Form ref="saleFormRef" :tableData="saleGoods" type="sale" />
      </el-tab-pane>
      <!-- 租赁工具 -->
      <el-tab-pane name="second">
        <template #label>
          <span class="custom-tabs-label">
            <svg-icon
              class="w-14px h-14px mr-5px text-[#969799]"
              :icon-class="
                activeName !== 'second'
                  ? 'assetslease-no-select'
                  : 'assetslease-select'
              "
            />
            {{ $t("common.rentalTools") }}
          </span>
        </template>
        <!-- 列表 -->
        <Form ref="leaseFormRef" :tableData="leaseGoods" type="lease" />
      </el-tab-pane>
    </el-tabs>

    <div
      class="border-l-[#4E6BEF] border-l-5px h-24px flex pl-8px text-[#323233] items-center text-16px font-900 mt-20px mb-16px"
    >
      {{ $t("common.picture") }}
    </div>
    <multi-upload v-model="multiPicUrls" />
  </div>
</template>

<script lang="ts" setup>
import MultiUpload from "@/components/Upload/MultiUpload.vue";
import type { TabsPaneContext } from "element-plus";
import Form from "./form.vue";
import { Goods } from "@/api/returnassets/model";
import ReturnassetsAPI from "@/api/returnassets";
const props = withDefaults(
  defineProps<{
    projectOptions: Options[];
  }>(),
  {
    projectOptions: () => {
      return [];
    },
  }
);
const multiPicUrls = ref([]);
const projectId = ref("");
const saleGoods = ref<Goods[]>([]);
const leaseGoods = ref<Goods[]>([]);
// 筛选列表
const handleProjectChange = (value: any) => {
  ReturnassetsAPI.getList({ project_id: value }).then((data) => {
    saleGoods.value = data?.list?.sale_goods as Goods[];
    leaseGoods.value = data?.list?.lease_goods as Goods[];
  });

  // saleGoods.value = [
  //   {
  //     id: 1,
  //     asset_name: "测试商品1",
  //     name: "测试商品1",
  //     num: 0,
  //     qty: 10,
  //     unit_price: 10,
  //     asset_origin_price: 10,
  //     price_dif: 0,
  //   },
  //   {
  //     id: 2,
  //     asset_name: "测试商品2",
  //     name: "测试商品2",
  //     num: 0,
  //     qty: 14,
  //     unit_price: 5,
  //     asset_origin_price: 20,
  //     price_dif: 0,
  //   },
  //   {
  //     id: 3,
  //     asset_name: "测试商品3",
  //     name: "测试商品3",
  //     num: 0,
  //     qty: 30,
  //     unit_price: 10,
  //     asset_origin_price: 30,
  //     price_dif: 0,
  //   },
  // ];
};

const initReturn = () => {
  projectId.value = "";
  saleGoods.value = [];
  leaseGoods.value = [];
};

const activeName = ref("first");
const handleTabClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const saleFormRef = ref<InstanceType<typeof Form> | null>(null);
const leaseFormRef = ref<InstanceType<typeof Form> | null>(null);

defineExpose({
  saleFormRef,
  leaseFormRef,
  projectId,
  initReturn,
  multiPicUrls,
});
</script>

<style scoped>
/* @import url(); 引入公共css类 */
</style>
